<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>课程信息管理</title>
	<script type="text/javascript" src="../../static/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	  <!-- 返回按钮 -->
  <script type="text/javascript">
      $(document).on('click','.goback',function(){
    window.history.back();
  })
  </script>
    <style type="text/css">

        .table > tbody > tr > td {
     vertical-align: middle;
     text-align: center;
        }

        .table > thead > tr > th {
     vertical-align: middle;
     text-align: center;
        }

        table{
            border: solid 1px #666;
            border-collapse: collapse;
            width: 100%;
            cursor: default;
        }
        tr{
            border: solid 1px #666;
            height: 30px;
        }
        table thead tr{
            background-color: #096;
        }
        table thead tr th:hover{
            background-color: #873;
            color: white;
        }
        td{
            border: solid 1px #666;
        }
        th{
            border: solid 1px #666;
            text-align: center;
            cursor: pointer;
        }
        .sequence{
            text-align: center;
        }
        .hover{
            background-color: #grey;
        }

    </style>

</head>
<body>
	<div class="container-fluid">
	 <div class="col-sm-10">
                    <ol class="breadcrumb">
                        <li class="active">教学管理
                        </li>
                        <li class="active">课程信息管理
                        </li>
                    </ol>
                      <div class="container-fluid">
					    <button class="btn bg-primary goback" style="margin:-7px 0 0 -15px">返回
					    </button>
					    <button class="btn bg-primary" onClick="document.location.reload()" style="float:right;margin-top: -7px;margin-right: -15px">刷新
					    </button>
					  </div>
                      <br>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            搜索
                        </div>
                        <div class="panel-body">
                            <form role="form" class="form-inline">
                                <div class="form-group">
                                    <select class="form-control">
                                        <option value="1">--选择老师--</option>
                                        <option value="2">周老师</option>
                                        <option value="3">杨老师</option>
                                    </select>
                                    <select class="form-control">
                                        <option value="1">上课日期</option>
                                        <option value="2">课程小结主题</option>
        
                                    </select>
                                    <input type="date" class="form-control" id="name" placeholder="请输入查询内容">
                                    -
                                    <input type="date" class="form-control" id="name" placeholder="请输入查询内容">
                                </div>
                               
                                <div class="form-group">
                                    <button type="submit" class="btn btn-default">查询</button>
                                    <button type="button" class="btn btn-default">全部</button>	

                                    	<button type="button" class="btn btn-warning " type="float:right"><a href="../course_into">新增</a></button>

                                </div>
                            </form>
                        </div>
                    </div>
                    <!--
                        列表展示
                    -->
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered " id="tableSort" >
                            <thead>
                                <tr>
                                    <th>课程流水号</th>
                                    <th>课程大主题</th>
                                    <th>教师姓名</th>
                                    <th>课程小节主题</th>
                                    <th>上课日期</th>
                                    <th>所用课时</th>
                                    <th>上课班级</th>
                                    <th>上课人数</th>
                                    <th>请假人数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody class="strdd">

                                <tr >
                                    <td>1</td>
                                    <td>
                                        DDLL0001
                                    </td>
                                    <td>loee</td>
                                    <td>1995-2-1</td>
                                    <td>2020-1-1</td>
                                    <td>在读</td>
                                    <td>20</td>
                                    <td>20</td>
                                    <td>20</td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="../course_view/" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a>
                                            <a href="../course_change/" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></a>
                                        </div>

                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>
                                        DDLL0002
                                    </td>
                                    <td>ali</td>
                                    <td>1995-2-24</td>
                                    <td>2020-5-1</td>
                                    <td>在读</td>
                                    <td>202</td>
                                    <td>202</td>
                                    <td>202</td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a>
                                            <a href="" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></a>
                                        </div>

                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>
                                        DDLL0001
                                    </td>
                                    <td>zhl</td>
                                    <td>1995-2-1</td>
                                    <td>2020-1-1</td>
                                    <td>在读</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a>
                                            <a href="" class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></a>
                                        </div>

                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <ul class="pagination" style="float: right;">
                        <li><a href="#">&laquo;</a>
                        </li>
                        <li class="active"><a href="#">1</a>
                        </li>
                        <li class="disabled"><a href="#">2</a>
                        </li>
                        <li><a href="#">3</a>
                        </li>
                        <li><a href="#">4</a>
                        </li>
                        <li><a href="#">5</a>
                        </li>
                        <li><a href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
<script type="text/javascript">
        $(document).ready(function(){
            var tableObject = $('#tableSort');//获取id为tableSort的table对象
            var tbHead = tableObject.children('thead');//获取table对象下的thead
            var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th
            var tbBody = tableObject.children('tbody');//获取table对象下的tbody
            var tbBodyTr = tbBody.find('tr');//获取tbody下的tr
            var sortIndex = -1; //初始化索引
            tbHeadTh.each(function() {//遍历thead的tr下的th
                var thisIndex = tbHeadTh.index($(this));//获取th所在的列号
                //鼠标移除和聚焦的效果，不重要
                $(this).mouseover(function(){ //鼠标移开事件
                    tbBodyTr.each(function(){//编列tbody下的tr
                        var tds = $(this).find("td");//获取列号为参数index的td对象集合
                        $(tds[thisIndex]).addClass("hover");
                    });
                }).mouseout(function(){ //鼠标聚焦时间
                    tbBodyTr.each(function(){
                        var tds = $(this).find("td");
                        $(tds[thisIndex]).removeClass("hover");
                    });
                });
 
                $(this).click(function() {  //鼠标点击事件
                    var dataType = $(this).attr("type"); //获取当前点击列的 type
                    checkColumnValue(thisIndex, dataType); //对当前点击的列进行排序 （当前索引，排序类型）
                });
            });
 
            //显示效果，不重要
            $("tbody tr").removeClass();//先移除tbody下tr的所有css类
            $("tbody tr").mouseover(function(){
                $(this).addClass("hover");
            }).mouseout(function(){
                $(this).removeClass("hover");
            });
 
            //对表格排序
            function checkColumnValue(index, type) {
                var trsValue = new Array();  //创建一个新的列表
                tbBodyTr.each(function() { //遍历所有的tr标签
                    var tds = $(this).find('td');//查找所有的 td 标签
                    //将当前的点击列 push 到一个新的列表中
                    //包括 当前行的 类型、当前索引的 值，和当前行的值
                    trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
                    $(this).html("");//清空当前列
                });
                var len = trsValue.length;//获取所有要拍戏的列的长度
                if(index == sortIndex){//sortIndex =-1
                    trsValue.reverse();//???
                } else {
                    for(var i = 0; i < len; i++){//遍历所有的行
                        type = trsValue[i].split(".separator")[0];// 获取要排序的类型
                        for(var j = i + 1; j < len; j++){
                            value1 = trsValue[i].split(".separator")[1];//当前值
                            value2 = trsValue[j].split(".separator")[1];//当前值的下一个
                            if(type == "number"){
                                //js 三元运算  如果 values1 等于 '' （空） 那么，该值就为0，否则 改值为当前值
                                value1 = value1 == "" ? 0 : value1;
                                value2 = value2 == "" ? 0 : value2;
                                //parseFloat() 函数可解析一个字符串，并返回一个浮点数。
                                //该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
                                //如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
                                if(parseFloat(value1) > parseFloat(value2)){//如果当前值 大于 下一个值
                                    var temp = trsValue[j];//那么就记住 大 的那个值
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            } else if(type == "ip"){
                                if(ip2int(value1) > ip2int(value2)){
                                    var temp = trsValue[j];
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            } else {
                                //JavaScript localeCompare() 方法 用本地特定的顺序来比较两个字符串。
                                //说明比较结果的数字。
                                // 如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。
                                // 如果 stringObject 大于 target，则该方法返回大于 0 的数。
                                // 如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
                                if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                                    var temp = trsValue[j];
                                    trsValue[j] = trsValue[i];
                                    trsValue[i] = temp;
                                }
                            }
                        }
                    }
                }
                for(var i = 0; i < len; i++){
                    //将排序完的 值 插入到 表格中
                    //:eq(index) 匹配一个给定索引值的元素
                    $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
                    //console.log($("tbody tr:eq(" + i + ")").html())
                }
                sortIndex = index;
            }
            //IP转成整型 ？？？？？
            function ip2int(ip){
                var num = 0;
                ip = ip.split(".");
                //Number() 函数把对象的值转换为数字。
                num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
                return num;
            }
            })
    </script>
</body>
</html>